<template>
  <div>
    <!-- 回复窗口 -->
    <div class="reply_panel">
      <!-- 当前用户头像 -->
      <div class="user_av">
        <img :src="userHeaderImg" alt="" />
      </div>
      <!-- 多行输入框，开始单行，然后自动增加 -->
      <div class="user_input">
        <!-- 输入框内容 -->
        <div class="input_text">
          <textarea rows="6" placeholder="发表你的回复" v-model="ContentText"></textarea>
        </div>
        <!-- 回复按钮区域 -->
        <div class="reply_btn">
          <div class="tools">
            <!-- 上传图片 -->
            <div class="icon">
              <div class="item">
                <div>
                  <svg
                    viewBox="0 0 24 24"
                    aria-hidden="true"
                    class="r-1cvl2hr r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03"
                  >
                    <g data-v-2729bdbb="">
                      <path
                        data-v-2729bdbb=""
                        d="M3 5.5C3 4.119 4.119 3 5.5 3h13C19.881 3 21 4.119 21 5.5v13c0 1.381-1.119 2.5-2.5 2.5h-13C4.119 21 3 19.881 3 18.5v-13zM5.5 5c-.276 0-.5.224-.5.5v9.086l3-3 3 3 5-5 3 3V5.5c0-.276-.224-.5-.5-.5h-13zM19 15.414l-3-3-5 5-3-3-3 3V18.5c0 .276.224.5.5.5h13c.276 0 .5-.224.5-.5v-3.086zM9.75 7C8.784 7 8 7.784 8 8.75s.784 1.75 1.75 1.75 1.75-.784 1.75-1.75S10.716 7 9.75 7z"
                      ></path>
                    </g>
                  </svg>
                </div>
              </div>
            </div>
            <!-- 表情包 -->
            <div class="icon">
              <div class="item">
                <div>
                  <svg
                    viewBox="0 0 24 24"
                    aria-hidden="true"
                    class="r-1cvl2hr r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03"
                  >
                    <g>
                      <path
                        d="M8 9.5C8 8.119 8.672 7 9.5 7S11 8.119 11 9.5 10.328 12 9.5 12 8 10.881 8 9.5zm6.5 2.5c.828 0 1.5-1.119 1.5-2.5S15.328 7 14.5 7 13 8.119 13 9.5s.672 2.5 1.5 2.5zM12 16c-2.224 0-3.021-2.227-3.051-2.316l-1.897.633c.05.15 1.271 3.684 4.949 3.684s4.898-3.533 4.949-3.684l-1.896-.638c-.033.095-.83 2.322-3.053 2.322zm10.25-4.001c0 5.652-4.598 10.25-10.25 10.25S1.75 17.652 1.75 12 6.348 1.75 12 1.75 22.25 6.348 22.25 12zm-2 0c0-4.549-3.701-8.25-8.25-8.25S3.75 7.451 3.75 12s3.701 8.25 8.25 8.25 8.25-3.701 8.25-8.25z"
                      ></path>
                    </g>
                  </svg>
                </div>
              </div>
            </div>
          </div>
          <div class="btn">
            <el-button type="primary" size="mini" round>回复</el-button>
          </div>
        </div>
      </div>
    </div>
    
    
  </div>
</template>
<script>
export default {
  name: "ReplyListComponents",
  components: {
  },
  props: {
    msg: String,
  },
  data() {
    return {
      userHeaderImg: require("@/assets/img/user.png"),
      autoSize: { minRows: 1, maxRows: 10 },
      ContentText:
        "",
    };
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.reply_panel {
  display: flex;
  border-top: 1px solid #ebebeb;
}

.user_av img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 10px 18px;
}

.user_input {
  display: flex;
  padding: 10px 0px;
  flex-direction: column;
}

.user_input textarea {
  width: 450px;
  border: 0;
  outline: none;
  /* overflow-y:hidden; */
  resize: none;
  max-height: 300px;
  font-size: 20px;
  margin-top: 10px;
}

.reply_btn {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 18px 0px;
}

.reply_btn .tools {
  display: flex;
}

.reply_btn .tools .item {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  /* 解释svg上下居中使用line-height,高度值为svg高度的一半+所在div高度=20/2 + 36 =46 */
  line-height: 46px;
}

.reply_btn .tools .item:hover {
  background-color: rgba(110, 188, 240, 0.3);
  border-radius: 50%;
}

.tools .icon {
  margin-right: 15px;
  cursor: pointer;
}

.tools .icon svg {
  width: 20px;
  height: 20px;
  fill: rgb(29, 155, 240);
}

.reply_btn .btn {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 720px) {

  .user_input{
    width: 100%;
  }
  .user_input textarea{
    width: 100%;
  }
}
</style>